@import '../../styles/variables';

.codeBlock {
  margin-bottom: 16px;
}

// Styles for a collapsible code block
.codeBlock.isCollapsible {
  padding-top: $CodeBlock-toggleButtonHeight;
  position: relative;

  .code {
    max-height: 1px; // Leave a horizontal rule
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .toggle {
    background: transparent;
    border: 1px solid $ms-color-neutralDark;
    border-bottom-width: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: $ms-color-black;
    font-family: monospace;
    font-size: $ms-font-size-m;
    font-weight: $ms-font-weight-regular;
    height: $CodeBlock-toggleButtonHeight;
    padding: 0 8px;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.167s ease;
  }

  // The collapsed code block is now open
  &.isOpen {
    .code {
      max-height: 400px;
    }

    .toggle {
      background: $ms-color-neutralDark;
      color: $ms-color-white;
    }
  }
}

// Common styles between themes
:global {
  .hljs {
    -webkit-overflow-scrolling: touch; // Improves scrolling performance
    display: block;
    font-family: monospace;
    line-height: 1.4;
    overflow-x: auto;
    padding: 20px;
  }
}

// Default dark theme
.codeBlock.isDarkTheme :global {
  .hljs {
    background: $ms-color-neutralDark;
    color: $ms-color-white;
  }
  .hljs-comment,
  .hljs-quote {
    color: #777;
  }
  .hljs-variable,
  .hljs-template-variable,
  .hljs-tag,
  .hljs-regexp,
  .hljs-meta,
  .hljs-number,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-literal,
  .hljs-params,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-link,
  .hljs-deletion {
    color: #ab875d;
  }
  .hljs-section,
  .hljs-title,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-type,
  .hljs-attribute {
    color: #9b869b;
  }
  .hljs-string,
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-addition {
    color: #8f9c6c;
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: bold;
  }
}

// Light theme
.codeBlock.isLightTheme :global {
  .hljs {
    background: $ms-color-white;
  }
  .hljs,
  .hljs-subst {
    color: #434f54;
  }
  .hljs-keyword,
  .hljs-attribute,
  .hljs-selector-tag,
  .hljs-doctag,
  .hljs-name {
    color: #00979d;
  }
  .hljs-built_in,
  .hljs-literal,
  .hljs-bullet,
  .hljs-code,
  .hljs-addition {
    color: #d35400;
  }
  .hljs-regexp,
  .hljs-symbol,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-link,
  .hljs-selector-attr,
  .hljs-selector-pseudo {
    color: #00979d;
  }
  .hljs-type,
  .hljs-string,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-quote,
  .hljs-template-tag,
  .hljs-deletion {
    color: #005c5f;
  }
  .hljs-title,
  .hljs-section {
    color: #880000;
    font-weight: bold;
  }
  .hljs-comment {
    color: rgba(149, 165, 166, 0.8);
  }
  .hljs-meta-keyword {
    color: #728e00;
  }
  .hljs-meta {
    color: #728e00;
    color: #434f54;
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: bold;
  }
  .hljs-function {
    color: #728e00;
  }
  .hljs-number {
    color: #8a7b52;
  }
}
